import { useState } from "react";
import {
	Button,
	Form,
	Input,
	message,
	Space,
	Typography,
	Divider,
	Card,
	Row,
	Col,
} from "antd";
import { Link } from "react-router-dom";
import { useRequest } from "ahooks";
import {
	LockOutlined,
	UserOutlined,
	MobileOutlined,
	BankOutlined,
} from "@ant-design/icons";
import { register, getSmsCode } from "@/api/services/loginService";

const { Text } = Typography;

interface RegisterFormData {
	company: string;
	remark?: string;
	nickname: string;
	mobile: string;
	password: string;
	confirmPassword: string;
	code: string;
}

const RegisterForm = () => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [countdown, setCountdown] = useState(0);

	const { run: handleRegister } = useRequest(
		async (values: RegisterFormData) => {
			const { confirmPassword, ...data } = values;
			return register(data);
		},
		{
			manual: true,
			onBefore: () => setLoading(true),
			onFinally: () => setLoading(false),
			onSuccess: () => {
				message.success("注册成功！");
				form.resetFields();
			},
			onError: (error) => {
				message.error(error.message || "注册失败，请重试");
			},
		},
	);

	const { run: handleGetSmsCode } = useRequest(
		async () => {
			const mobile = form.getFieldValue("mobile");
			if (!mobile) {
				throw new Error("请输入手机号");
			}
			return getSmsCode(mobile);
		},
		{
			manual: true,
			onSuccess: () => {
				message.success("验证码已发送");
				setCountdown(60);
				const timer = setInterval(() => {
					setCountdown((c) => {
						if (c <= 1) {
							clearInterval(timer);
							return 0;
						}
						return c - 1;
					});
				}, 1000);
			},
			onError: (error) => {},
		},
	);

	const handleSubmit = async (values: RegisterFormData) => {
		if (values.password !== values.confirmPassword) {
			message.error("两次输入的密码不一致");
			return;
		}
		await handleRegister(values);
	};

	return (
		<Card>
			<Form
				form={form}
				name="register"
				onFinish={handleSubmit}
				autoComplete="off"
				layout="vertical"
			>
				<Form.Item
					name="company"
					rules={[{ required: true, message: "请输入公司简称" }]}
				>
					<Input prefix={<BankOutlined />} placeholder="公司简称" />
				</Form.Item>

				<Form.Item name="remark">
					<Input.TextArea placeholder="备注信息（选填）" rows={2} />
				</Form.Item>

				<Form.Item
					name="nickname"
					rules={[{ required: true, message: "请输入姓名" }]}
				>
					<Input prefix={<UserOutlined />} placeholder="姓名" />
				</Form.Item>

				<Form.Item
					name="mobile"
					rules={[
						{ required: true, message: "请输入手机号" },
						{ pattern: /^1\d{10}$/, message: "请输入正确的手机号" },
					]}
				>
					<Input prefix={<MobileOutlined />} placeholder="手机号" />
				</Form.Item>

				<Form.Item
					name="password"
					rules={[{ required: true, message: "请输入密码" }]}
				>
					<Input.Password prefix={<LockOutlined />} placeholder="密码" />
				</Form.Item>

				<Form.Item
					name="confirmPassword"
					rules={[{ required: true, message: "请确认密码" }]}
				>
					<Input.Password prefix={<LockOutlined />} placeholder="确认密码" />
				</Form.Item>

				<Form.Item
					name="code"
					rules={[{ required: true, message: "请输入验证码" }]}
				>
					<Row gutter={8}>
						<Col flex="auto">
							<Input placeholder="验证码" />
						</Col>
						<Col flex="none">
							<Button disabled={countdown > 0} onClick={handleGetSmsCode}>
								{countdown > 0 ? `${countdown}秒后重试` : "获取验证码"}
							</Button>
						</Col>
					</Row>
				</Form.Item>

				<Form.Item>
					<Button type="primary" htmlType="submit" block loading={loading}>
						注册
					</Button>
				</Form.Item>
			</Form>
		</Card>
	);
};

export default RegisterForm;
